<template>
  <div class="app-container">
    <!-- 使用通用头部组件 -->
    <AppHeader />

    <!-- 主要内容区域 -->
    <main class="app-main">
      <div class="content-wrapper">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
          <div class="sidebar-section">
            <h3 class="channel-title">我的频道</h3>
            <ul>
              <li><a href="#">动态</a></li>
              <li><a href="#">收藏</a></li>
              <li><a href="#">历史</a></li>
              <li><a href="#">稍后观看</a></li>
              <li><a href="#">上传</a></li>
            </ul>
          </div>
          
          <div class="sidebar-section">
            <div class="section-divider"></div>
            <h3 class="channel-title">推荐频道</h3>
            <ul>
              <li><a href="#">动画</a></li>
              <li><a href="#">音乐</a></li>
              <li><a href="#">舞蹈</a></li>
              <li><a href="#">游戏</a></li>
              <li><a href="#">知识</a></li>
              <li><a href="#">科技</a></li>
              <li><a href="#">运动</a></li>
              <li><a href="#">汽车</a></li>
              <li><a href="#">生活</a></li>
              <li><a href="#">美食</a></li>
              <li><a href="#">动物圈</a></li>
              <li><a href="#">鬼畜</a></li>
              <li><a href="#">时尚</a></li>
              <li><a href="#">娱乐</a></li>
              <li><a href="#">影视</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
        </aside>

        <!-- 视频内容区域 -->
        <div class="video-content">
          <!-- 轮播图 -->
          <div class="carousel">
            <div class="carousel-container" :style="carouselStyle">
              <div v-for="(item, index) in carouselItems" :key="item.id" 
                   class="carousel-item" 
                   :class="{ active: currentIndex === index }">
                <img :src="item.image" :alt="item.title" />
                <div class="carousel-caption">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </div>
            
            <!-- 轮播控制按钮 -->
            <button class="carousel-control prev" @click="prevSlide">&lt;</button>
            <button class="carousel-control next" @click="nextSlide">&gt;</button>
            
            <!-- 轮播指示器 -->
            <div class="carousel-indicators">
              <button v-for="(item, index) in carouselItems" :key="item.id" 
                      class="indicator" 
                      :class="{ active: currentIndex === index }" 
                      @click="goToSlide(index)"></button>
            </div>
          </div>

          <!-- 视频卡片网格 -->
          <div class="video-grid">
            <div v-for="video in videos" :key="video.id" class="video-card">
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="视频封面" />
                <span class="video-duration">{{ video.duration }}</span>
              </div>
              <div class="video-info">
                <div class="video-title">{{ video.title }}</div>
                <div class="video-meta">
                  <span class="video-views">{{ video.views }} 次观看</span>
                  <span class="video-date">{{ video.date }}</span>
                </div>
                <div class="video-channel">
                  <img :src="video.channel.avatar" alt="频道头像" />
                  <span class="channel-name">{{ video.channel.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">帮助中心</a>
          <a href="#">隐私政策</a>
          <a href="#">用户协议</a>
        </div>
        <div class="copyright">
          © 2024 Noody. All Rights Reserved.
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '../store/user'
import AppHeader from '../components/AppHeader.vue'

const userStore = useUserStore()

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    image: 'https://picsum.photos/id/237/1200/300',
    title: '2024年巴黎奥运会：精彩瞬间回顾',
    description: '一起回顾巴黎奥运会上那些激动人心的精彩时刻'
  },
  {
    id: 2,
    image: 'https://picsum.photos/id/1015/1200/300',
    title: '科技前沿：人工智能新突破',
    description: '探索AI领域的最新进展和未来发展趋势'
  },
  {
    id: 3,
    image: 'https://picsum.photos/id/1018/1200/300',
    title: '全球美食节盛大开幕',
    description: '汇聚世界各地的美食文化，一场味蕾的环球旅行'
  },
  {
    id: 4,
    image: 'https://picsum.photos/id/1019/1200/300',
    title: '音乐节2024：夏日狂欢盛宴',
    description: '众多知名音乐人齐聚，打造视听盛宴'
  }
])

const currentIndex = ref(0)
const carouselTimer = ref(null)
const carouselInterval = 5000 // 5秒切换一次

// 计算轮播容器样式
const carouselStyle = computed(() => {
  return {
    transform: `translateX(-${currentIndex.value * 100}%)`,
    transition: 'transform 0.5s ease-in-out'
  }
})

// 切换到上一张
const prevSlide = () => {
  currentIndex.value = currentIndex.value === 0 ? carouselItems.value.length - 1 : currentIndex.value - 1
  resetTimer()
}

// 切换到下一张
const nextSlide = () => {
  currentIndex.value = currentIndex.value === carouselItems.value.length - 1 ? 0 : currentIndex.value + 1
  resetTimer()
}

// 跳转到指定幻灯片
const goToSlide = (index) => {
  currentIndex.value = index
  resetTimer()
}

// 重置轮播计时器
const resetTimer = () => {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
  }
  startTimer()
}

// 开始轮播计时器
const startTimer = () => {
  carouselTimer.value = setInterval(() => {
    nextSlide()
  }, carouselInterval)
}

// 组件挂载时启动自动轮播
onMounted(() => {
  startTimer()
  
  // 添加鼠标悬停暂停自动轮播
  const carousel = document.querySelector('.carousel')
  if (carousel) {
    carousel.addEventListener('mouseenter', () => {
      if (carouselTimer.value) {
        clearInterval(carouselTimer.value)
      }
    })
    carousel.addEventListener('mouseleave', () => {
      startTimer()
    })
  }
})

// 组件卸载时清理轮播计时器
onUnmounted(() => {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
  }
  
  // 清理事件监听器
  const carousel = document.querySelector('.carousel')
  if (carousel) {
    carousel.removeEventListener('mouseenter', () => {})
    carousel.removeEventListener('mouseleave', () => {})
  }
})

// 模拟视频数据
const videos = [
  {
    id: 1,
    title: '【动画推荐】2024年必看的十部新番',
    thumbnail: 'https://picsum.photos/id/177/400/225',
    duration: '12:30',
    views: '12.5万',
    date: '3天前',
    channel: {
      name: '动漫爱好者',
      avatar: 'https://picsum.photos/id/1012/50/50'
    }
  },
  {
    id: 2,
    title: '【游戏实况】最新热门游戏试玩',
    thumbnail: 'https://picsum.photos/id/1028/400/225',
    duration: '25:45',
    views: '8.7万',
    date: '1周前',
    channel: {
      name: '游戏达人',
      avatar: 'https://picsum.photos/id/1005/50/50'
    }
  },
  {
    id: 3,
    title: '【音乐翻唱】经典歌曲重新演绎',
    thumbnail: 'https://picsum.photos/id/1039/400/225',
    duration: '03:45',
    views: '23.1万',
    date: '2天前',
    channel: {
      name: '音乐小天后',
      avatar: 'https://picsum.photos/id/1027/50/50'
    }
  },
  {
    id: 4,
    title: '【美食教程】家常菜的高级做法',
    thumbnail: 'https://picsum.photos/id/1080/400/225',
    duration: '18:20',
    views: '15.3万',
    date: '5天前',
    channel: {
      name: '美食家老王',
      avatar: 'https://picsum.photos/id/1011/50/50'
    }
  },
  {
    id: 5,
    title: '【科技评测】最新手机全面体验',
    thumbnail: 'https://picsum.photos/id/1059/400/225',
    duration: '32:15',
    views: '9.8万',
    date: '1周前',
    channel: {
      name: '科技前沿',
      avatar: 'https://picsum.photos/id/1006/50/50'
    }
  },
  {
    id: 6,
    title: '【旅行vlog】探索隐秘的自然风景',
    thumbnail: 'https://picsum.photos/id/1043/400/225',
    duration: '15:40',
    views: '7.2万',
    date: '3天前',
    channel: {
      name: '旅行者小明',
      avatar: 'https://picsum.photos/id/1009/50/50'
    }
  },
  {
    id: 7,
    title: '【生活技巧】提高效率的日常小窍门',
    thumbnail: 'https://picsum.photos/id/1060/400/225',
    duration: '10:25',
    views: '5.6万',
    date: '2天前',
    channel: {
      name: '生活家小丽',
      avatar: 'https://picsum.photos/id/1027/50/50'
    }
  },
  {
    id: 8,
    title: '【健康养生】科学饮食的关键要点',
    thumbnail: 'https://picsum.photos/id/1080/400/225',
    duration: '14:10',
    views: '9.3万',
    date: '4天前',
    channel: {
      name: '健康顾问老张',
      avatar: 'https://picsum.photos/id/1011/50/50'
    }
  }
]

// 不需要这些函数，已在AppHeader组件中处理

// 组件卸载时清理轮播计时器
onUnmounted(() => {
  if (carouselTimer.value) {
    clearInterval(carouselTimer.value)
  }
})
</script>

<style scoped>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 容器样式 */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 顶部导航栏 */
.app-header {
  background-color: white;
  border-bottom: 1px solid #e8f5e9;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  box-sizing: border-box;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #FB7299;
  margin: 0;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.logo {
  color: #4CAF50;
  font-weight: 700;
  margin: 0;
  font-size: 24px;
}

.main-nav {
  flex: 1;
  text-align: center;
}

.main-nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  max-width: 800px;
  flex-wrap: wrap;
}

.main-nav li {
  margin: 0 10px;
  white-space: nowrap;
}

.main-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 0;
  position: relative;
}

.main-nav a:hover,
.main-nav a.active {
  color: #4CAF50;
}

.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4CAF50;
}

.user-actions {
  display: flex;
  align-items: center;
}

.search-box {
  display: flex;
  margin-right: 20px;
}

.search-box input {
  width: 200px;
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px 0 0 20px;
  font-size: 14px;
}

.search-button {
  padding: 8px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

/* 小型登录按钮 */
.login-button-small {
  padding: 8px 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.login-button-small:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.notification-button {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 20px;
  font-size: 20px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

/* 侧边栏链接样式 - 确保所有链接悬停效果一致 */
.sidebar a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s;
}

/* 确保没有其他样式覆盖悬停效果 */
.sidebar a:hover,
.sidebar li a:hover,
.sidebar-section a:hover {
  background-color: #4CAF50 !important;
  color: white !important;
}

/* 频道标题样式 - 放大字体 */
.channel-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

/* 推荐频道上方的横杠 */
.section-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20px 0;
  width: 100%;
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  font-size: 14px;
  font-weight: 500;
  margin-right: 5px;
}

.dropdown-icon {
  font-size: 12px;
  color: #666;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  z-index: 1000;
}

.user-dropdown ul {
  list-style: none;
}

.user-dropdown li {
  padding: 0;
}

.user-dropdown a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.user-dropdown a:hover {
  background-color: #f5f5f5;
}

/* 主要内容区域 */
.app-main {
  flex: 1;
  width: 100%;
}

.content-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  box-sizing: border-box;
}

/* 侧边栏 */
.sidebar {
  width: 180px;
  margin-right: 20px;
}

.sidebar-section {
  margin-bottom: 20px;
}

.sidebar-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sidebar-section ul {
  list-style: none;
}

.sidebar-section li {
  margin-bottom: 5px;
}

.sidebar-section a {
  display: block;
  padding: 8px 10px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s;
}

.sidebar-section a:hover {
  background-color: #f0f0f0;
  color: #FB7299;
}

/* 视频内容区域 */
.video-content {
  flex: 1;
}

.carousel {
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 300px;
}

.carousel-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.carousel-item {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  padding: 20px;
}

.carousel-caption h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.carousel-caption p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background-color 0.3s;
}

.carousel-control:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.indicator.active {
  background-color: #4CAF50;
  transform: scale(1.2);
}

.carousel-item {
  position: relative;
}

.carousel-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 20px;
  color: white;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 20px;
}

/* 视频卡片网格 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
  width: 100%;
}

.video-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 视频网格样式 - 固定显示8个视频 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
  min-height: calc(2 * (300px + 20px)); /* 确保即使视频加载失败也保持布局稳定 */
}

/* 确保精选推荐位置固定 */
.carousel {
  position: relative;
  width: 100%;
  height: 300px; /* 固定轮播图高度 */
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0; /* 移除底部边距，确保位置紧贴下方视频 */
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  padding: 20px;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 18px;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  overflow: hidden;
}

/* 响应式布局样式 - 修改为保持原有布局结构 */
@media (max-width: 1200px) {
  /* 移除布局方向改变，保持水平布局 */
  .content-wrapper {
    flex-direction: row;
    padding: 10px;
  }
  
  /* 保持侧边栏的原始样式 */
  .sidebar {
    width: 180px;
    margin-right: 20px;
  }
  
  .sidebar-section {
    margin-bottom: 20px;
  }
  
  .sidebar-section ul {
    display: block;
  }
  
  .sidebar-section li {
    margin-bottom: 5px;
  }
}

/* 移除小屏幕布局调整，确保任何屏幕尺寸下都保持原有布局 */

/* 主内容区域样式优化 */
.content-wrapper {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.sidebar {
  flex-shrink: 0;
  width: 200px;
  padding: 20px 0;
  background-color: #f9f9f9;
  border-right: 1px solid #e0e0e0;
}

.video-content {
  flex: 1;
  padding: 20px;
  padding-left: 40px;
}

.video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.video-channel {
  display: flex;
  align-items: center;
}

.video-channel img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.channel-name {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 页脚 */
.app-footer {
  background-color: #2c2c2c;
  color: #999;
  padding: 30px 0;
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  margin: 0 15px;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #fff;
}

.copyright {
  text-align: center;
  font-size: 14px;
}
</style>